<template>
  <div class="user-center-container">
    <el-row :gutter="20">
      <!-- 左侧用户信息卡片 -->
      <el-col :span="8">
        <el-card class="user-card" :body-style="{ padding: '30px' }">
          <div class="user-header">
            <el-avatar
                :size="120"
                :src="baseApi + '/' + userInfo.avatar"
                class="user-avatar"
            />
            <h2 class="username">{{ userInfo.username }}</h2>
            <div class="user-role">{{ userInfo.roleName }}</div>
          </div>

          <el-divider />

          <div class="user-info">
            <div class="info-item">
              <el-icon><User /></el-icon>
              <span class="label">姓名:</span>
              <span class="value">{{ userInfo.name }}</span>
            </div>
            <div class="info-item">
              <el-icon><User /></el-icon>
              <span class="label">角色:</span>
              <span class="value">{{ userInfo.roleName }}</span>
            </div>
            <div class="info-item">
              <el-icon><User /></el-icon>
              <span class="label">账户:</span>
              <span class="value">{{ userInfo.username }}</span>
            </div>
            <div class="info-item">
              <el-icon><Phone /></el-icon>
              <span class="label">手机号码:</span>
              <span class="value">{{ userInfo.mobile }}</span>
            </div>
            <div class="info-item">
              <el-icon><Message /></el-icon>
              <span class="label">邮箱:</span>
              <span class="value">{{ userInfo.email || '未绑定' }}</span>
            </div>
            <div class="info-item">
              <el-icon><Calendar /></el-icon>
              <span class="label">创建日期:</span>
              <span class="value">{{ userInfo.createTime }}</span>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 右侧安全设置卡片 -->
      <el-col :span="16">
        <el-card class="security-card" :body-style="{ padding: '30px' }">
          <template #header>
            <div class="card-header">
              <h3>安全设置</h3>
              <span class="subtitle">请妥善保管您的账号安全信息</span>
            </div>
          </template>

          <div class="security-items">
            <!-- 账户密码 -->
            <div class="security-item">
              <div class="item-left">
                <el-icon class="security-icon"><Lock /></el-icon>
                <div class="item-info">
                  <div class="title">账户密码</div>
                  <div class="desc">建议您定期更换密码，设置安全性高的密码可以使账号更安全</div>
                </div>
              </div>
              <el-button type="primary" link @click="changePassword">修改</el-button>
            </div>

            <!-- 绑定手机 -->
            <div class="security-item">
              <div class="item-left">
                <el-icon class="security-icon"><Iphone /></el-icon>
                <div class="item-info">
                  <div class="title">绑定手机</div>
                  <div class="desc">已绑定手机：{{ userInfo.mobile || '未绑定' }}</div>
                </div>
              </div>
              <el-button type="primary" link @click="changePhone">{{ userInfo.mobile ? '更换' : '绑定' }}</el-button>
            </div>

            <!-- 绑定邮箱 -->
            <div class="security-item">
              <div class="item-left">
                <el-icon class="security-icon"><Message /></el-icon>
                <div class="item-info">
                  <div class="title">绑定邮箱</div>
                  <div class="desc">已绑定邮箱：{{ userInfo.email || '未绑定' }}</div>
                </div>
              </div>
              <el-button type="primary" link @click="changeEmail">{{ userInfo.email ? '更换' : '绑定' }}</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { Phone, User, Message, Calendar, Lock, Iphone } from '@element-plus/icons-vue';
import { getUserCenterApi } from '@/api/auth';

const userInfo = reactive({
  roleName: '',
  username: '',
  name: '',
  avatar: '',
  mobile: '',
  email: '',
  createTime: '',
});

const baseApi = '/api';

// 获取用户信息
const getUserInfo = async () => {
  try {
    const result = await getUserCenterApi();
    if (result.code === 200) {
      Object.assign(userInfo, result.data);
    }
  } catch (error) {
    ElMessage.error('获取用户信息失败');
  }
};

// 修改密码
const changePassword = () => {
  ElMessage.info('功能开发中...');
};

// 修改手机
const changePhone = () => {
  ElMessage.info('功能开发中...');
};

// 修改邮箱
const changeEmail = () => {
  ElMessage.info('功能开发中...');
};

onMounted(() => {
  getUserInfo();
});
</script>

<style scoped lang="scss">
.user-center-container {
  padding: 20px;
  background: #f5f7f9;
  height: calc(100vh - 134px); // 修改这里，减去头部导航和padding的高度
  overflow: hidden; // 添加这行，防止出现滚动条

  .user-card {
    height: 100%; // 添加这行，让卡片填充满容器高度
    border-radius: 8px;
    transition: all 0.3s;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .user-header {
      text-align: center;
      padding: 20px 0;

      .user-avatar {
        border: 4px solid #fff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s;

        &:hover {
          transform: rotate(360deg);
        }
      }

      .username {
        margin: 15px 0 5px;
        font-size: 20px;
        font-weight: 600;
        color: #303133;
      }

      .user-role {
        color: #909399;
        font-size: 14px;
      }
    }

    .user-info {
      padding: 10px 0;

      .info-item {
        display: flex;
        align-items: center;
        padding: 12px 0;
        transition: all 0.3s;

        &:hover {
          background: #f5f7fa;
          padding-left: 10px;
          border-radius: 4px;
        }

        .el-icon {
          font-size: 18px;
          color: #409EFF;
          margin-right: 10px;
        }

        .label {
          color: #606266;
          margin-right: 10px;
          font-weight: 500;
        }

        .value {
          color: #303133;
        }
      }
    }
  }

  .security-card {
    height: 100%; // 添加这行，让卡片填充满容器高度
    border-radius: 8px;
    transition: all 0.3s;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .card-header {
      h3 {
        margin: 0;
        font-size: 18px;
        color: #303133;
      }

      .subtitle {
        font-size: 13px;
        color: #909399;
        margin-top: 5px;
      }
    }

    .security-items {
      .security-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        border-bottom: 1px solid #ebeef5;
        transition: all 0.3s;

        &:hover {
          background: #f5f7fa;
        }

        &:last-child {
          border-bottom: none;
        }

        .item-left {
          display: flex;
          align-items: center;
          gap: 15px;

          .security-icon {
            font-size: 24px;
            color: #409EFF;
          }

          .item-info {
            .title {
              font-size: 16px;
              font-weight: 500;
              color: #303133;
              margin-bottom: 5px;
            }

            .desc {
              color: #909399;
              font-size: 13px;
            }
          }
        }
      }
    }
  }
  // 添加行样式
  .el-row {
    height: 100%;

    // 添加列样式
    .el-col {
      height: 100%;
    }
  }
}
</style>
